/*
 * @Author: zhangzhen
 * @Date: 2022-07-05 16:03:04
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-04-17 16:22:06
 *
 */

import styles from './styles.module.scss'
import { shallowEqual } from 'react-redux'
import { useAppSelector } from '@/redux/hook'
import { Col, Row } from 'antd'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation } from 'swiper'
// Import Swiper styles
import 'swiper/scss'

const IconBox = () => {
  const { configs, iconArr } = useAppSelector(({ state }) => ({ ...state }), shallowEqual)

  const carouselNum = iconArr.length % 12 > 0 ? parseInt(String(iconArr.length / 12)) + 1 : iconArr.length / 12
  const carouselNumArr = []
  let i = 1
  while (i <= carouselNum) {
    carouselNumArr.push(i)
    i++
  }

  return (
    <div className={styles.iconBox}>
      <div className={styles.iconContent}>
        {/* 图标 */}
        <div className={styles.carsouselBox}>
          <Swiper
            className={styles.carsousel}
            modules={[Navigation]}
            loop
            navigation={{
              nextEl: `.${styles.swiperButtonNext}`,
              prevEl: `.${styles.swiperButtonPrev}`
            }}
          >
            {carouselNumArr.map((citem) => (
              <SwiperSlide key={citem}>
                <Row gutter={[16, 24]}>
                  {iconArr.map((item: any, index: number) => {
                    if (index + 1 > (citem - 1) * 12 && index + 1 <= citem * 12) {
                      return (
                        <Col key={item.url} span={4}>
                          <div className={styles.iconItem}>
                            <span
                              className={styles.iconItem_icon}
                              style={{ borderColor: configs.iconBorderColor || 'white' }}
                              onClick={() => {
                                window.open(item.url)
                              }}
                            >
                              {item.iconUrl && item.iconUrl !== '' ? (
                                <img src={item.iconUrl} alt={item.name} />
                              ) : (
                                <span className={styles.noImgUrl}> {item.name.substring(0, 1)}</span>
                              )}
                            </span>
                            <span className={styles.iconName} style={{ color: configs.iconNameColor }}>
                              {item.name}
                            </span>
                          </div>
                        </Col>
                      )
                    }
                  })}
                </Row>
              </SwiperSlide>
            ))}
          </Swiper>
          <RightCircleOutlined className={styles.swiperButtonNext} />
          <LeftCircleOutlined className={styles.swiperButtonPrev} />
        </div>
      </div>
    </div>
  )
}

export default IconBox
